<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/ec.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <link rel="stylesheet" href="/Public/Wap/css/dy/add.css">
    <div id="vmRoot" class="vm-container">
        <div class="card-box">
            <el-form ref="form" label-width="140px" style="max-width: 800px;">
                <el-form-item label="请输入商品链接">
                    <el-input v-model="postData.goods_url"></el-input>
                    <el-button @click="getGoods" type="primary" style="margin-top: 15px;">获取商品数据</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card-box">
            <el-form ref="form" label-width="140px">
                <el-form-item label="活动名称">
                    <el-input v-model="postData.activity_title"></el-input>
                </el-form-item>
                <el-form-item label="活动ID">
                    <el-input v-model="postData.activity_code"></el-input>
                </el-form-item>
                <el-form-item label="排期时间">
                    <!-- <el-input v-model="postData.service_hang"></el-input> -->
                    <el-col :span="11">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择开始时间"
                            v-model="postData.start_time" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择结束时间"
                            v-model="postData.end_time" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="postData.state">
                        <el-radio v-for="(n, i) in stateList" :key="i" :label="n.idx">{{ n.title }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <div class="main-line"></div>

                <el-form-item label="店铺名称">
                    <el-input v-model="postData.seller_name"></el-input>
                </el-form-item>
                <el-form-item label="店铺id">
                    <el-input v-model="postData.seller_id"></el-input>
                </el-form-item>
                <el-form-item label="店铺链接">
                    <el-input v-model="postData.serller_url"></el-input>
                </el-form-item>
                <el-form-item label="商品标题">
                    <el-input v-model="postData.goods_title"></el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <!-- <el-input v-model="postData.avatar"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile">
                        <img v-if="postData.pic_url" :src="postData.pic_url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="原价">
                    <el-input v-model="postData.reserve_price"></el-input>
                </el-form-item>
                <el-form-item label="折扣价">
                    <el-input v-model="postData.zk_final_price"></el-input>
                </el-form-item>
                <el-form-item label="销量">
                    <el-input v-model="postData.sales"></el-input>
                </el-form-item>

                <div class="main-line"></div>

                <el-form-item label="券金额">
                    <el-input v-model="postData.coupon_price"></el-input>
                </el-form-item>
                <el-form-item label="券链接">
                    <el-input v-model="postData.coupon_url"></el-input>
                </el-form-item>
                <el-form-item label="券后价">
                    <el-input v-model="postData.coupon_back_price"></el-input>
                </el-form-item>
                <el-form-item label="券图">
                    <!-- <el-input v-model="postData.coupon_pic"> </el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile1">
                        <img v-if="postData.coupon_pic" :src="postData.coupon_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <div class="main-line"></div>

                <el-form-item label="佣金比例">
                    <el-input v-model="postData.reward_radio"></el-input>
                </el-form-item>
                <el-form-item label="服务费">
                    <el-input v-model="postData.service_radio"></el-input>
                </el-form-item>
                <el-form-item label="结束数据">
                    <el-input v-model="postData.over_data"></el-input>
                </el-form-item>
                <el-form-item label="结束图">
                    <!-- <el-input v-model=" postData.over_pic"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile2">
                        <img v-if="postData.over_pic" :src="postData.over_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="总费用">
                    <el-input v-model="postData.total_money"></el-input>
                </el-form-item>
                <el-form-item label="总费用收款图">
                    <!-- <el-input v-model=" postData.over_pic"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile3">
                        <img v-if="postData.total_money_pic" :src="postData.total_money_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="支出费用">
                    <el-input v-model="postData.zhichu_money"></el-input>
                </el-form-item>
                <el-form-item label="支出费用图片">
                    <!-- <el-input v-model=" postData.over_pic"></el-input> -->
                    <el-upload class="avatar-uploader" action="" accept="image/*" :show-file-list="false"
                        :before-upload="uploadFile4">
                        <img v-if="postData.zhichu_pic" :src="postData.zhichu_pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="结余款">
                    <el-input v-model="postData.jieyu_money"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-if="edit" type="primary" @click="editSubmit">确认修改</el-button>
                    <el-button v-else type="primary" @click="submit">立即发布</el-button>
                    <!-- <el-button>取消</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
    <script>
        new Vue({
            el: '#vmRoot',
            data: function () {
                return {
                    edit: '<?php echo $_REQUEST["edit"] ?>' || '',
                    id: '<?php echo $_REQUEST["id"] ?>' || '',
                    stateList: '待排期,进行中,已结算,已结算'.split(',').map((n, i) => { return { title: n, idx: i + 1 } }),
                    postData: {
                        pic_url: '',
                        activity_code: '',
                        activity_title: '',
                        start_time: '',
                        end_time: '',
                        goods_url: '',
                        goods_title: '',
                        serller_url: '',
                        seller_name: '',
                        seller_id: '',
                        reserve_price: '',
                        zk_final_price: '',
                        coupon_price: '',
                        coupon_back_price: '',
                        reward_radio: '',
                        service_radio: '',
                        coupon_pic: '',
                        coupon_url: '',
                        over_pic: '',
                        over_data: '',
                        total_money: '',
                        total_money_pic: '',
                        sales: '',
                        zhichu_money: '',
                        zhichu_pic: '',
                        jieyu_money: '',
                        state: ''
                    }
                }
            },
            methods: {
                getDetail() {
                    let that = this;
                    $.post('{:U("/kcadmin/Dy/activityGoodsDetail")}', { id: that.id }, function (res) {
                        if (res.code == 200) {
                            // that.$message({
                            //     message: '获取成功',
                            //     type: 'success'
                            // });
                            for (i in res.data) {
                                that.postData[i] = res.data[i]
                            }
                        }
                    })
                },
                getGoods() {
                    let that = this;
                    $.post('{:U("/kcadmin/Dy/getTaobaoGoodsDetail")}', { goods_url: that.postData.goods_url }, function (res) {
                        if (res.code == 200) {
                            that.$message({
                                message: '获取成功',
                                type: 'success'
                            });
                            for (i in res.data) {
                                that.postData[i] = res.data[i]
                            }
                        }
                    })
                },
                upXml(file, func) {
                    let data = new FormData();
                    data.append('kcs_uploader_file', file);

                    let xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            console.log(xhr.responseText);
                            console.log('####');

                            var data = JSON.parse(xhr.responseText).data;
                            var ecode = JSON.parse(xhr.responseText).error_code;

                            // console.log(data)
                            if (ecode == 0) {
                                console.log(data.avatar_url)
                                func(data.avatar_url)
                                // that.postData.avatar = data.avatar_url
                            }
                        }
                    };
                    xhr.open('POST', ("http://" + location.hostname) + '/api/Upload');
                    xhr.send(data)
                },
                uploadFile(file) {
                    let that = this;
                    console.log(file)
                    that.upXml(file, function (url) {
                        that.postData.pic_url = url
                    })

                    return false;
                },
                uploadFile1(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.postData.coupon_pic = url
                    })
                    let data = new FormData();
                    data.append('kcs_uploader_file', file);

                    return false;
                },
                uploadFile2(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.postData.over_pic = url
                    })

                    return false;
                },
                uploadFile3(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.postData.total_money_pic = url
                    })

                    return false;
                },
                uploadFile4(file) {
                    let that = this;
                    that.upXml(file, function (url) {
                        that.postData.zhichu_pic = url
                    })

                    return false;
                },
                submit() {
                    let that = this;
                    let postData = that.postData;
                    $.post('{:U("/kcadmin/Dy/activityGoodsAdd")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '发布成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href = '{:U("/kcadmin/dy/index") }'
                            }, 700)
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
                editSubmit() {
                    let that = this;
                    let postData = that.postData;
                    $.post('{:U("/kcadmin/Dy/activityGoodsSave")}', postData, function (res) {
                        console.log(res)
                        if (res.code == 200) {
                            that.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href = '{:U("/kcadmin/dy/index") }'
                            }, 700)
                        } else {
                            that.$message.error(res.msg);
                        }
                    })
                },
            },
            mounted() {
                // this.checkRes()
                if (this.edit && this.id) {
                    this.getDetail()
                }
            }
        })
    </script>
</block>